<template>
  <div class="sealing-account-detail">
    <el-row class="sealing-account-info">
      <Title :title="'操作记录'" class="mb-16"/>
      <el-timeline v-if="operateDetail && operateDetail.length > 0">
        <el-timeline-item
          v-for="(item, index) in operateDetail"
          :key="index"
          :timestamp="item.reviewTime | standardFormatNoHour"
          placement="top"
        >
          <el-row v-for="(data, index) in item.reviewDetail" :key="index">
            <el-col v-if="data.reviewState === 0" :span="24" class="detail">
              <div class="review-state pass">{{ data.reviewState | setState }}</div>
              <div>操作人员：{{ data.operationName }}</div>
              <div>操作时间：{{ data.operationTime | standardFormat }}</div>
            </el-col>
            <el-col v-else-if="data.reviewState === 1" :span="24" class="detail">
              <div class="review-state fail">{{ data.reviewState | setState }}</div>
              <div>备注：{{ data.remark }}</div>
              <div>操作人员：{{ data.operationName }}</div>
              <div>操作时间：{{ data.operationTime | standardFormat }}</div>
            </el-col>
            <el-col v-else :span="24" class="detail">
              <div class="review-state fail">{{ data.reviewState | setState }}</div>
              <div>操作人员：{{ data.operationName }}</div>
              <div>操作时间：{{ data.operationTime | standardFormat }}</div>
            </el-col>
          </el-row>
        </el-timeline-item>
      </el-timeline>
      <el-row v-else style="font-size: 14px;">
        <p>暂时没有审批记录哦～～</p>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { reviewDetail } from '@/api/sealingAccount';
import { standardFormatNoHour, standardFormat } from '@/filters/date';
import { setState } from '@/filters/status';
import Title from '@/components/Title';

export default {
  filters: {
    standardFormatNoHour,
    standardFormat,
    setState
  },
  components: { Title },
  data() {
    return {
      operateDetail: [],
      orderId: '',
      sealId: null,
      type: 0
    };
  },
  created() {
    this.orderId = Number(this.$route.params.sealingAccountId) || '';
    this.sealId = Number(this.$route.params.sealId) || '';
    this.type = Number(this.$route.query.type) || 0;
    sessionStorage.setItem('sealId', this.sealId);
    this.getDetail();
  },
  methods: {
    getDetail() {
      const params = {
        type: this.type,
        id: this.orderId
      };
      reviewDetail(params).then(res => {
        this.operateDetail = res.data;
      }, result => {
        // this.$message.error(result.message);
      }).catch(err => {
        console.error(err);
      });
    },
    toBack() {
      this.$router.go(-1);
      // this.$router.push({
      //   name: 'sealingAccount'
      // });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.sealing-account-detail {
  padding: 24px;
  margin: 16px;
  background:rgba(255,255,255,1);
  min-height: calc(100vh - 80px);
  .sealing-account-info {
    .el-timeline {
      background-color: #fff;
      margin-bottom: 19px;
      padding-top: 18px;
      border-radius: 9px;
      .el-timeline-item__content {
        .detail {
          margin: 15px 0;
          line-height: 24px;
          background-color: #f8fafb;
          padding: 18px 0 19px 14px;
          color: #515151;
          border-radius: 12px;
          .review-state {
            font-weight: bold;
            font-size: 16px;
            }
          .pass {
            color: #55a7d2;
          }
          .fail {
            color: #f18d3e;
          }
        }
      }
    }
  }
}
</style>
